<template>
	<view class="">
		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					品牌类别
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPicker('businessId')">
					<input class="input-r" type="text" placeholder="请填写品牌类别" placeholder-class="placeholder-class"
						v-model="businessId" :disabled="true" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					品牌名称
				</view>
				<view class="acea-row row-middle row-right item-r">
					<Uselect class="input-r" v-model="dataform.brandId" :list="brandList" keyName="realname" keyId="id"
						@uchange="uchange" @inChange="getbrandList" placeholder="请输入品牌名称" :name="brandName" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					所属公司
				</view>
				<view class="acea-row row-middle row-right item-r">
					<!-- <input class="input-r" type="text" placeholder="请输入公司名称" placeholder-class="placeholder-class"
						v-model="dataform.company" /> -->
					<Uselect class="input-r" v-model="dataform.company" :list="companyList" keyName="companyName"
						keyId="id" @uchange="uCompanyChange" @inChange="getCompanyList" placeholder="请输入公司名称"
						:name="dataform.companyName" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder="请输入/选择公司地址" v-model="dataform.address"
						placeholder-class="placeholder-class">
					<image src="../static/images/location.png" mode="" @click="mapChooseLocation"></image>
				</view>
			</view>

			<!-- 品牌logo -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title">
						品牌logo
					</view>
					<view class="example-text">
					</view>
				</view>
				<view class="example-text-m">
					注意：上传logo格式为*.jpg,*.png。图片最佳尺寸为240*150像素。图片大小不得超过200k。
				</view>
				<view class="acea-row pictrue-list">
					<view class="acea-row row-column row-center-wrapper pictrue" v-for="item in PhotoList">
						<image style="width: 218rpx;height: 172rpx;" :src="item" mode=""></image>
					</view>
					<view class="acea-row row-column row-center-wrapper pictrue" @click="uploadImg('logo')"
						v-if="PhotoList.length == 0">
						<view class="upload-icon">
							<image src="../static/images/upload_icon.png" mode=""></image>
						</view>
						<view>添加logo</view>
					</view>

				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					知名度
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPicker('type')">
					<input class="input-r" type="text" placeholder="请选择知名度" placeholder-class="placeholder-class"
						v-model="type" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					扩张策略
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="openPicker('extension')">
					<input class="input-r" type="text" placeholder="请选择扩张策略" placeholder-class="placeholder-class"
						v-model="extension" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">人均消费</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:30" v-model="dataform.consumeMoney">
						<text>元</text>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					消费档次
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<input class="input-r" type="text" placeholder="请选择消费档次" placeholder-class="placeholder-class"
						@click="openPicker('consumeLevel')" v-model="consumeLevel" />
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">净利润率</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:30" v-model="dataform.rate">
						<text>%</text>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">日均营业额</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:30" v-model="dataform.twnover">
						<text>元</text>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">消费群体</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<input class="input-r" type="text" placeholder="请选择消费档次" placeholder-class="placeholder-class"
						@click="openPicker('consumeKeyword')" v-model="dataform.consumeKeyword" />
				</view>
			</view>
			<!-- 品牌认证 -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title ">
						品牌认证
					</view>
					<view class="example-text">

					</view>
				</view>
				<view class="example-text-l">
					请尽快上传营业执照，完成品牌认证。
				</view>
				<view class="acea-row pictrue-list">
					<view class="acea-row row-column row-center-wrapper pictrue" v-for="item in PhotoList2"
						:key="item.url">
						<image :src="item" mode="" style="width: 109px;height: 86px;"></image>
					</view>
					<view class="acea-row row-column row-center-wrapper pictrue" @click="uploadImg('qualifixation')"
						v-if="PhotoList2.length<3">
						<view class="upload-icon">
							<image src="../static/images/upload_icon.png" mode=""></image>
						</view>
						<view>添加营业执照</view>
					</view>
				</view>
			</view>
			<!-- 经营特色 -->
			<view class="module">
				<view class="acea-row row-between">
					<view class="module-title">
						经营特色
					</view>

					<view class="add-advantage red-sanjiao-r" @click="addAd">
						没找到合适的？选择自定义
					</view>
				</view>

				<view class="acea-row advantage-list">
					<view class="itemBox" v-for="(item,index) in advantages" :key="index">
						<icon type="cancel" color="#000" size="14" @click="closeAdvantages(item,index)" class="close" />
						<view class="item" :class="advantageIds.indexOf(index)!=-1?'item-on':''"
							@click="advantageChecked(item,index)">{{item}}</view>
					</view>
				</view>
			</view>
			<!-- 品牌描述 -->
			<view class="module">
				<view class="module-title">
					品牌描述
				</view>
				<view class="textacea-box">
					<textarea placeholder="请填写品牌描述" v-model="dataform.details" maxlength="-1"></textarea>
					<!-- <view class="num-text">
						{{description.length}}/{{maxLength}}
					</view> -->
				</view>
			</view>
			<!-- 联系人 -->
			<view class="acea-row row-middle row-between item  ">
				<view class="label label-m">
					联系人
				</view>
				<view class="add-icon" @click="toPage('/pages/releases/addBrandContact/addBrandContact')">
					<image src="../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view class="item">
				<view class="contact-list">
					<view class="acea-row row-middle row-between contact-p" v-for="(item,index) in contactList"
						:key="index">
						<view class="acea-row row-middle row-between contact-r">
							<view class="add-icon" @click="delContact(index,item)">
								<image src="../static/images/sub_icon.png" mode=""></image>
							</view>
							<view class="name">{{ item.username }}</view>
							<!-- <view class="gray-text">
								{{ item.type == 1 ? '老板' : ( item.type == 2 ? '房东' : '雇员') }}
							</view> -->
							<view class="gray-text"
								@click="toPage('/pages/releases/addBrandContact/addBrandContact?info='+JSON.stringify(item) + '&infoIndex='+index)">
								{{item.phone}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="acea-row row-middle row-between btns">
			<view class="white-btn" @click="bindShowModule">继续完善</view>
			<view class="red-btn" @click="handleComfrim">完成</view>
		</view>
		<u-picker :show="pickerShow" :columns="columns" @cancel="pickerShow=false" @confirm="confirm" :keyName="keyName"
			:defaultIndex="defaultIndex"></u-picker>

		<!-- 弹窗 -->
		<view class="module-box" v-if="showModule">
			<view class="acea-row row-middle row-between title">
				<view>是否继续完善资料 </view>
				<view class="close" @click.stop="bindHideModule">
					<image src="../static/images/add_icon.png" mode=""></image>
				</view>
			</view>
			<view class="acea-row project-list">
				<view class="item" :class="projectOn==index?'item-on':''" v-for="(item,index) in projectListC"
					:key="index" @click.stop="projectOn=index">{{item.name}}</view>
			</view>
			<view class="acea-row row-middle row-between btns">
				<view class="white-btn" @click.stop="bindHideModule">取消</view>
				<view class="red-btn" @click="changeProject(projectOn)">下一步</view>
			</view>
		</view>
		<view class="mask" v-if="showModule" @click.stop="bindHideModule"></view>
		<addKeyWord ref="addKeyWord" @addConfirm="addConfirm" />
	</view>
</template>

<script>
	import {
		getBrandAddApi,
		updateBrandApi,
		getBrandDetailsApi
	} from '@/api/brand/index.js';
	import {
		getBrandListApi
	} from '@/api/brand/index.js'
	import  {getCompanyApi} from '@/api/api.js'
	import addKeyWord from '../components/addKeyWord/addKeyWord.vue'
	import Uselect from '@/pages/releases/components/select.vue';
	import {
		dictionary,
		contactDelete
	} from '@/api/subletOfShop.js';
	import {
		toPage
	} from '@/filters/commFilter.js'

	export default {
		props: {
			brandType: {
				type: Array,
				default: () => []
			},
			brandId: {
				type: Number,
				default: null
			}
		},
		watch: {
			brandType(val) {
				this.businessId = '';
				this.dataform.businessId = null
				console.log(val)
			},
			// 监听列表数据变化
			brandId: {
				handler(nVal, oVal) {
					if (!nVal) return
					this.initData(nVal)
				},
				immediate: true,
				deep: true
			},
		},
		components: {
			addKeyWord,
			Uselect
		},
		data() {
			return {
				dataform: {},
				pickerType: '',
				columns: [],
				keyName: '',
				defaultIndex: [0],
				pickerShow: false,
				businessId: '', //类别名称
				consumeLevel: '', //消费等级名称
				extension: '', //扩张策略名称
				type: '', //知名度名称
				PhotoList: [], //logo图片列表
				contactList: [],
				PhotoList2: [], //认证图片列表
				consumeKeyword: '', //消费群体
				showModule: false,
				maxLength: 400,
				projectOn: 0,
				advantages: [],
				advantageIds: [],
				companyList: [],
				brandList: [],
				brandName: '',
				projectListC: [{
					name: '添加拓展计划',
					path: '/pages/releases/subletOfShop/subletOfShop?categoryOn=0&&typeOn=2'
				}, {
					name: '添加代理加盟',
					path: '/pages/releases/agentJoin/agentJoin'
				}, {
					name: '添加供应链',
					path: '/pages/releases/supplyChain/supplyChain'
				}, {
					name: '添加品牌故事',
					path: '/pages/releases/brandStory/brandStory'
				}, {
					name: '添加布点',
					path: '/pages/releases/addPoint/addPoint'
				}],
				consumeList: []
			}
		},
		created() {
			//获取项目列表
			this.getbrandList("");
			this.getCompanyList("");
		},
		mounted() {
			let that = this;
			uni.$on('contact', function(data) {
				that.contactList = [data];
			})
			uni.$on('upContact', function(data) {
				that.contactList = [data.info];
				// that.contactList.splice(data.index, 1, data.info)
			})
			uni.$on('getPhoto', function(data) {
				that.dataform.qualifixation = data
			})
			this.getConsumeKeyword(); //获取消费群体字典
			uni.$on('initContact', function(data) {
				if (that.contactList.length < 1) {
					that.contactList.push(data)
				}
			})
			that.dataform.address = that.$address;
			that.$set(that.dataform, 'latitude', this.$location.latitude)
			that.$set(that.dataform, 'longitude', this.$location.longitude)
			getApp().globalData.initContact()
		},
		methods: {
			toPage,
			//添加店铺优势
			addAd() {
				this.$refs.addKeyWord.popupShow = true
			},
			//获取品牌列表
			async getbrandList(realname) {
				uni.showLoading({
					title: '加载中'
				});
				try {
					let res = await getBrandListApi({
						limit: 8,
						realname
					});
					this.brandList = res?.data.list
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			//获取公司
			async getCompanyList(companyName) {
				uni.showLoading({
					title: '加载中'
				});
				try {
					let res = await getCompanyApi({
						limit: 8,
						companyName
					});
					this.companyList = res?.data.list
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			//初始化编辑数据
			async initData(id) {
				try {
					let {
						data
					} = await getBrandDetailsApi(id);
					this.dataform = data;
					this.PhotoList = data.image.split(',');
					this.PhotoList2 = data.qualifixation.split(',');
					switch (data.extension) {
						case '0':
							this.extension = '全国性扩张';
							break;
						case '1':
							this.extension = '区域性扩张';
							break;
						case '2':
							this.extension = '本士性扩张';
							break;
						case '3':
							this.extension = '无扩张计划';
							break;
					}
					this.businessId = data.businessName;
					this.type = data.type
					this.contactList = data.contacts.map(item => {
						return {
							id: item.contactId,
							status: item.open,
							type: item.contactType,
							username: item.contactName,
							phone: item.contactPhone
						}
					})
					this.type = data.type;
					this.consumeLevel = data.consumeLevel == '1' ? '低档' : (data.consumeLevel == '2' ? '中档' : (data
						.consumeLevel == '3' ? '高档' : ''))
				} catch (e) {
					//TODO handle the exception
				}
			},
			async getConsumeKeyword() {
				try {
					let {
						data
					} = await dictionary({
						gids: 22
					});
					this.consumeList = data['22'];
				} catch (e) {
					//TODO handle the exception
				}
			},
			uchange(d) {
				this.dataform.realname = d.realname;
			},
			uCompanyChange(d) {
				console.log(d)
				this.dataform.companyName = d.companyName;
			},
			changeProject(index) {
				this.projectOn = index;
				uni.navigateTo({
					url: this.projectListC[index].path
				})
			},
			continueFillIn() {
				uni.navigateTo({
					url: '/pages/releases/continueFillin/brandData'
				})
			},
			bindHideModule() {
				this.showModule = false
			},
			bindShowModule() {
				this.showModule = true
			},
			//跳转页面
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			//删除联系人
			async delContact(index, item) {
				this.contactList.splice(index, 1);
				try {
					await contactDelete(item.id)
				} catch (e) {
					//TODO handle the exception
				}
			},
			//上传照片
			uploadImg(name) {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "user",
					pid: 0
				}, function(res) {
					if (name == 'logo') return that.PhotoList.push(res.data.url);
					that.PhotoList2.push(res.data.url);
				});
			},
			addConfirm(e) {
				this.advantages=this.advantages.concat(e)
			},
			//打开选择器
			openPicker(params) {
				this.pickerType = params;
				this.keyName = 'name';
				this.defaultIndex = [0]
				switch (params) {
					case 'businessId':
						this.columns = [
							this.brandType
						];
						break;
					case 'consumeLevel':
						this.columns = [
							[{
									id: 1,
									name: '低'
								},
								{
									id: 2,
									name: '中'
								},
								{
									id: 3,
									name: '高'
								},
							]
						];
						break;
					case 'extension':
						this.columns = [
							[{
									id: 0,
									name: '全国性扩张'
								},
								{
									id: 1,
									name: '区域性扩张'
								},
								{
									id: 2,
									name: '本士性扩张'
								},
								{
									id: 3,
									name: '无扩张计划'
								},
							]
						];
						break;
					case 'type':
						this.columns = [
							[{
									id: 0,
									name: '国际知名品牌'
								},
								{
									id: 1,
									name: '国内知名品牌'
								},
								{
									id: 2,
									name: '本工知名品牌'
								},
								{
									id: 3,
									name: '成长性国内品牌'
								}
							]
						];
						break;
					case 'consumeKeyword':
						this.columns = [
							this.consumeList
						];
						break;
					default:
						this.columns = []
				}
				this.pickerShow = true;
			},

			//picker点击确认
			confirm(e) {
				if (this.pickerType != 'consumeKeyword') {
					this.dataform[this.pickerType] = e.value[0].id;
					this[this.pickerType] = e.value[0].name;
				} else {
					this.dataform[this.pickerType] = e.value[0].name;
				}
				this.pickerShow = false;
			},

			async mapChooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.$set(this.dataform, 'address', res.address)
						this.$set(this.dataform, 'latitude', res.latitude)
						this.$set(this.dataform, 'longitude', res.longitude)
					},
				})
			},
			//删除标签
			closeAdvantages(item, index) {
				this.advantages.splice(index, 1)
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				}
			},
			advantageChecked(item, index) {
				if (this.advantageIds.indexOf(index) != -1) {
					let idx = this.advantageIds.indexOf(index)
					this.advantageIds.splice(idx, 1);
					this.storeAdvantage.splice(index, 1)
				} else {
					this.advantageIds.push(index);
					this.storeAdvantage.push(item)
				}
			},
			//提交表单
			handleComfrim() {
				let that = this

				let images = this.PhotoList.map(item => {
					return item.split('9000/')[1]
				})
				this.dataform.image = images.join(','); //处理logo图片数据
				let images2 = this.PhotoList2.map(item => {
					return item.split('9000/')[1]
				})
				this.dataform.qualifixation = images2.join(','); //处理认证图片数据
				this.dataform.contacts = this.contactList.map(item => {
					return {
						contactId: item.id,
						open: item.status,
						identity: item.type
					}
				});
				if (!this.dataform.businessId) return that.$util.Tips({
					title: '请输入品牌类别'
				});
				if (!this.dataform.realname) return that.$util.Tips({
					title: '请输入品牌名称'
				});
				if (!this.dataform.company) return that.$util.Tips({
					title: '请输入所属公司'
				});
				if (!this.dataform.address) return that.$util.Tips({
					title: '请选址地址'
				});
				// if (!this.dataform.image) return that.$util.Tips({
				// 	title: '请上传品牌logo'
				// });
				if (!this.dataform.type) return that.$util.Tips({
					title: '请选择知名度'
				});
				if (!this.dataform.extension) return that.$util.Tips({
					title: '请选择扩张策略'
				});
				if (!this.dataform.consumeMoney) return that.$util.Tips({
					title: '请输入人均消费'
				});
				if (!this.dataform.consumeLevel) return that.$util.Tips({
					title: '请选择消费档次'
				});
				if (!this.dataform.contacts.length > 0) return that.$util.Tips({
					title: '请添加联系人'
				});
				// if (!this.dataform.qualifixation) return that.$util.Tips({
				// 	title: '请完善品牌认证'
				// });
				this.getRecruitAdd()
			},
			async getRecruitAdd() {
				try {
					let res = this.dataform.id ? await updateBrandApi(this.dataform) : await getBrandAddApi(this
						.dataform);
					uni.navigateTo({
						url: '/pages/releases/brand/brand'
					})
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.module-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 30rpx 30rpx 0px 0px;
		background: rgba(255, 255, 255, 1);
		z-index: 99;
		padding: 30rpx 30rpx 70rpx;

		.title {
			font-size: 32rpx;
			font-weight: 400;

			.close {
				width: 40rpx;
				height: 40rpx;
				transform: rotate(45deg);

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.project-list {
			padding: 30rpx 0;

			.item {
				height: 62rpx;
				line-height: 62rpx;
				white-space: nowrap;
				font-size: 28rpx;
				font-weight: 400;
				padding: 0rpx 24rpx;
				border-radius: 40rpx;
				background: rgba(247, 247, 247, 1);
				margin-bottom: 24rpx;
			}

			.item~.item {
				margin-left: 24rpx;
			}

			.item-on {
				white-space: nowrap;
				opacity: 1;
				background: rgba(239, 37, 41, 1);
				color: rgba(255, 255, 255, 1);
			}
		}

		.btns {
			padding: 0;

			.white-btn {
				width: 330rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				border-radius: 10rpx;
				border: 1px solid rgba(238, 33, 45, 1);
				background: rgba(247, 248, 250, 1);
			}

			.red-btn {
				width: 330rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1.0);
				border-radius: 10rpx;
				background: rgba(238, 33, 45, 1);
				border: 1px solid rgba(238, 33, 45, 1);
			}
		}
	}

	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 98;
		transition: all 0.3s ease-in-out;
		// opacity: 0;
		// visibility: hidden;
	}
</style>